{% extends "base.html" %}

{% block title %}评阅结果 - 作文评阅系统{% endblock %}

{% block header %}评阅结果{% endblock %}

{% block styles %}
<style>
    .result-container {
        max-width: 1100px;
        margin: 40px auto;
        padding: 40px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .essay-info {
        margin-bottom: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
    }

    .essay-title {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .essay-meta {
        display: flex;
        gap: 20px;
        color: #7f8c8d;
        font-size: 14px;
    }

    .total-score {
        text-align: center;
        margin: 40px 0;
    }

    .score-value {
        font-size: 72px;
        font-weight: 300;
        color: #e74c3c;
    }

    .score-label {
        color: #7f8c8d;
        margin-top: 10px;
    }

    .dimension-scores {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .dimension-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.3s;
    }

    .dimension-card:hover {
        transform: translateY(-5px);
    }

    .dimension-score {
        font-size: 36px;
        color: #3498db;
        margin: 10px 0;
    }

    .dimension-label {
        color: #2c3e50;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .dimension-comment {
        color: #7f8c8d;
        font-size: 14px;
        line-height: 1.5;
    }

    .analysis-section {
        margin-bottom: 30px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 10px;
    }

    .analysis-title {
        font-size: 20px;
        color: #2c3e50;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3498db;
    }

    .highlight-list, .suggestion-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .highlight-item, .suggestion-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .highlight-item i {
        color: #f1c40f;
        font-size: 20px;
    }

    .suggestion-item i {
        color: #2ecc71;
        font-size: 20px;
    }

    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 40px;
    }

    .action-btn {
        padding: 12px 25px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .export-btn {
        background: #2ecc71;
        color: white;
    }

    .export-btn:hover {
        background: #27ae60;
        transform: translateY(-2px);
    }

    .return-btn {
        background: #3498db;
        color: white;
    }

    .return-btn:hover {
        background: #2980b9;
        transform: translateY(-2px);
    }

    @media (max-width: 768px) {
        .dimension-scores {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .sentences-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .sentence-item {
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .sentence-text {
        font-size: 1.1rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        padding-left: 1rem;
        border-left: 3px solid #3498db;
    }

    .sentence-analysis {
        color: #7f8c8d;
        line-height: 1.6;
    }
</style>
{% endblock %}

{% block content %}
<div class="result-container">
    <div class="essay-info">
        <h2 class="essay-title" id="essayTitle"></h2>
        <div class="essay-meta">
            <span><i class="fas fa-graduation-cap"></i><span id="essayGrade"></span></span>
            <span><i class="fas fa-clock"></i><span id="essayDate"></span></span>
            <span><i class="fas fa-file-alt"></i><span id="wordCount"></span>字</span>
        </div>
    </div>

    <div class="total-score">
        <div class="score-value" id="totalScore"></div>
        <div class="score-label">总分</div>
    </div>

    <div class="dimension-scores" id="dimensionScores">
        <!-- 维度得分将通过JavaScript动态插入 -->
    </div>

    <div class="analysis-section">
        <h3 class="analysis-title">作文亮点</h3>
        <ul class="highlight-list" id="highlightList">
            <!-- 亮点将通过JavaScript动态插入 -->
        </ul>
    </div>

    <div class="analysis-section">
        <h3 class="analysis-title">改进建议</h3>
        <ul class="suggestion-list" id="suggestionList">
            <!-- 建议将通过JavaScript动态插入 -->
        </ul>
    </div>

    <div class="analysis-section">
        <h3 class="analysis-title">精彩句子赏析</h3>
        <div class="sentences-list" id="sentencesList">
            <!-- 精彩句子将通过JavaScript动态插入 -->
        </div>
    </div>

    <div class="action-buttons">
        <button class="action-btn export-btn" onclick="exportResult()">
            <i class="fas fa-download"></i>导出报告
        </button>
        <button class="action-btn return-btn" onclick="window.location.href='/'">
            <i class="fas fa-redo"></i>重新评阅
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/result.js') }}"></script>
{% endblock %} 